<template>
  <view
    class="review-page"
    :style="reviewData.length == 0 ? 'background-color: #FFF;' : ''"
  >
    <cu-custom bgColor="bgcolorfff" :isBack="true">
      <block slot="content">
        <view class="toptext">评论管理</view>
      </block>
    </cu-custom>

    <view class="review-list">
      <view
        class="review"
        v-for="(item, index) in reviewData"
        :key="item.id"
        @click="openItem(item, index)"
      >
        <image :src="item.avatar" mode="widthFix" />
        <view class="review-text">
          <view class="review-left">
            <text>{{ item.userName }}</text>
            <view
              class="review-c"
              v-if="item.type != 1"
              :style="[{ marginBottom: item.type != 1 ? '15rpx' : '26rpx' }]"
            >
              <text class="textAlie"
                >回复了{{ item.atUserName }}的评论
                <text class="replay_time">{{ item.addTimes }}</text>
              </text>
            </view>
            <view
              v-if="item.type != 1"
              :style="[{ marginBottom: '15rpx' }, { fontSize: '28rpx' }]"
              class="review_f"
              >{{ item.intro }}</view
            >
            <view class="review-b">
              <view v-if="item.type != 1" class="xsolid"></view>
              <text
                :style="[
                  {
                    marginTop: item.type != 1 ? '0px' : '26rpx',
                    paddingLeft: item.type != 1 ? '16rpx' : '0',
                    color: item.type != 1 ? '#757575' : 'rgba(36, 36, 36, 1)',
                  },
                ]"
                :class="
                  item.type != 1 ? 'replay_text_x margin' : 'replay_text_x'
                "
                >{{ item.atCommentIntro || item.intro }}
                <text v-if="item.type == 1" class="replay_time">{{
                  item.addTimes
                }}</text></text
              >
            </view>
          </view> 
          <!-- <image src="" mode="widthFix" /> -->
        </view>
      </view>
    </view>

    <mask :maskSwitch="switchList" @handle="handle" :clickSelf="self"></mask>

    <reallyInput
      :switchIn="!inputbox"
      @down="inputbox = false"
      @submite="send"
      :single="single"
      v-model="textvalue"
    ></reallyInput>

    <view v-if="showCard" class="no-review">
      <image
        src="https://static.77du.net/template/ciff/img/no-review.png"
        mode="widthFix"
      />
      <text>还没收到留言~</text>
    </view>
    <loading v-if="loadingflag"></loading>
  </view>
</template>

<script>
import mask from "../../conpoments/mask";
import reallyInput from "../../conpoments/reallyInput";
import { comList, replyMsg, deletCom } from "../../api/api";
export default {
  data() {
    return {
      textvalue: "", //输入框的值
      switchList: false, //底部tab开关
      reviewData: [], //评论数据
      inputbox: false, //输入框开关
      index: 0, //当前回复列表的索引
      stop: false, //是否还有数据
      self: false, //打开的评论是否是自己的评论
      handleObject: {}, //当前点击的数据对象
      single: "", //输入框的提示值
      showCard: false, //展示无数据
    };
  },
  watch: {
    inputbox: function (newvalue) {
      newvalue == false ? (this.textvalue = "") : null;
    },
  },
  computed: {
    username() {
      return (item) => {
        if (item.type == 1) {
          return item.userName;
        } else if (item.type == 2 || item.type == 3) {
          return item.atUserName;
        } else {
          return "";
        }
      };
    },
  },
  components: {
    mask,
    reallyInput,
  },
  onShow() {
    this.getreviewData(true);
  },
  onReachBottom() {
    //触底加载
    if (!this.stop) {
      this.getreviewData();
    }
  },
  methods: {
    //单击某个评论
    openItem(item) {
      this.handleObject = item;
      item.type == 1 ? (this.self = true) : (this.self = false);
      this.switchList = true;
    },
    //真输入框的mask开关
    down(flag) {
      this.inputbox = flag;
    },
    handle(e) {
      // e== 当前点击的列表传回的数据
      this.switchList = false;
      console.log(e);
      if (e.name == "回复") {
        this.inputbox = true; //打开输入框
        this.single = "回复:" + this.handleObject.userName;
      } else if (e.name == "删除") {
        this.loadingflag = true;
        deletCom(this.handleObject.id).then((res) => {
          this.loadingflag = false;
          if (res[1].data.code == "000000") {
            uni.showToast({
              title: "删除成功",
              duration: 1000,
              icon: "none",
            });
            this.deletArray(this.handleObject.id); //避免全部刷新渲染
          }
        });
      } else if (e.name == "查看原文") {
      }
    },
    //回复消息
    async send() {
      
      this.loadingflag = true;
      console.log("send");
      //发送评论
      let res = await replyMsg(this.handleObject.id, this.textvalue);
      this.loadingflag = false;
      if (res[1].data.code === "000000") {
        this.textvalue = "";
        this.inputbox = false;
        uni.showToast({
          duration: 500,
          title: "回复成功",
          icon: "none",
        });

        this.flashView();
      }
    },
    //刷新数据
    flashView(time = 500) {
      setTimeout(() => {
        this.index = 0;
        this.reviewData = [];
        this.stop = false;
        this.getreviewData();
      }, time);
    },
    //查看详情的跳转
    jump(type) {
      if (type == 1) {
      }
    },
    //获取所有评论列表
    async getreviewData(first = false) {
      this.loadingflag = true;
      this.index++;
      try {
        const res = await comList(this.index, 10);
        this.loadingflag = false;
        console.log(res);
        if (res[1].data.code === "000000") {
          const { content } = res[1].data.data;
          this.reviewData.push(...(content || []));
          if ((content && content.length < 10) || content == null) {
            this.stop = true; //没有数据了
          }
          this.reviewData.length == 0 ? (this.showCard = true) : null;
        }
      } catch (e) {
        //TODO handle the exception
      }
    },
    //关闭模态框
    closeModel() {
      this.switchList = false;
    },
    deletArray(id) {
      for (let index = 0; index < this.reviewData.length; index++) {
        const element = this.reviewData[index];
        if (element.id == id) {
          this.reviewData.splice(index, 1);
          break;
        }
      }
      if (this.reviewData.length == 0) {
        this.showCard = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.review-page {
  width: 100%;
  min-height: 100vh;
}

.no-review {
  margin-top: 165rpx;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;

  > image {
    width: 334rpx;
    height: 320rpx;
  }

  > text {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(162, 162, 162, 1);
    margin-top: 98rpx;
  }
}

.review-list {
  background-color: #ffffff;
  width: 100%;
  padding-left: 40rpx;
  padding-right: 34rpx;
}

.review {
  width: 100%;
  background-color: #ffffff;
  padding-top: 26rpx;
  padding-bottom: 35rpx;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  border-bottom: 2rpx solid rgba(232, 232, 232, 1);
  margin-top: 2rpx;

  > image {
    width: 77rpx;
    height: 77rpx;
    border-radius: 50%;
    background-color: rosybrown;
    flex-shrink: 0;
  }

  .review-text {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 77rpx);

    > image {
      width: 89rpx;
      height: 89rpx;
      border-radius: 10rpx;
      background-color: teal;
    }

    .review-left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      padding-left: 23rpx;
      width: 100%;
      > text {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(36, 36, 36, 1);
      }

      .review-c {
        margin-top: 15rpx;
        margin-bottom: 26rpx;
        width: 100%;
        > text {
          font-size: 22rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: rgba(117, 117, 117, 1);
          letter-spacing: 2rpx;
          &:first-child {
            margin-right: 18rpx;
          }
        }
      }

      .review-b {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        word-wrap: break-word;
        .xsolid {
          width: 5rpx;
          height: 33rpx;
          background: rgba(230, 230, 230, 1);
          display: inline-block;
        }

        .replay_text_x {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: rgba(36, 36, 36, 1);
          width: calc(100% - 5rpx);
          word-wrap: break-word;
          &.margn {
            padding-left: 17rpx;
          }
        }
      }
    }
  }
}
.textAlie {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.review_f {
  width: 100%;
  word-wrap: break-word;
}
.replay_time {
  display: inline-block;
  padding-left: 18rpx;
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(117, 117, 117, 1);
}
</style>
